<template>
  <div class="main">
    <div class="header">
      <HeaderBack>发布</HeaderBack>
    </div>
    <div class="content">
      <div class="form_box flex-box">
        <input class="input input-line input-lg" placeholder="标题 10-30字之间" type="text">
        <div class="textarea_out flex flex-box">
          <textarea
            name="context"
            class="flex add_context input input-line"
            placeholder="来说说你的故事吧。。。"
          ></textarea>
        </div>
      </div>

      <div class="file_box">
        <div class="tab">
          <div class="tab-header">
            <div
              class="tab-link"
              data-to-tab=".tab1"
              @click="file_index = 0"
              :class="{'tab-active': file_index == 0}"
            >图片</div>
            <div
              class="tab-link"
              data-to-tab=".tab2"
              @click="file_index = 1"
              :class="{'tab-active': file_index == 1}"
            >文件</div>
          </div>
          <div class="tab-content">
            <div class="tab-page tab1" :class="{'tab-active': file_index == 0}">
              <div class="file_group img_group flex-box">
                <div
                  class="img_item"
                  v-for="(item, index) of img_list"
                  :key="index"
                  :style="'background-image: url(' + item.base64 + ');' + (item.backgroundSize && 'background-size:' + item.backgroundSize)"
                >
                  <div class="progress_bg" :style="'height: ' + item.progress + '%;'"></div>
                  <div class="progress_text">{{ item.progress }}%</div>
                  <div class="progress_del" @click="removeImg(index)">x</div>
                </div>
                <div class="add_btn add_img" @click="upload_img">添加
                  <br>图片
                </div>
              </div>
            </div>
            <div class="tab-page tab2" :class="{'tab-active': file_index == 1}">
              <div class="file_group">
                <div class="file_item" v-for="(item, index) of file_list" :key="index">
                  <div class="file_icon icon-svg"></div>
                  <div class="file_progress_box">
                    <div class="file_name">{{ item.name }}({{ item.size }})</div>
                    <div class="file_progress">
                      <div class="file_progress_bar" :style="'width: ' + item.progress + '%;'"></div>
                    </div>
                  </div>
                  <div class="file_action">
                    <div class="flex-box">
                      <div class="btn_remove btn_file_remove" @click="removeFile(index)">删除</div>
                      <!-- <div class="btn_setting">设置</div> -->
                    </div>
                  </div>
                </div>
                <div class="add_btn add_file" @click="upload_file">添加
                  <br>文件
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <button class="btn btn-fill btn-lg btn-block">立即发表</button>
    </div>
  </div>
</template>

<script>
import HeaderBack from "@/components/common/HeaderBack.vue";

export default {
  data() {
    return {
      type: "bbs_list_index",
      file_index: 0,
      img_list: [],
      file_list: []
    };
  },
  components: {
    HeaderBack
  },
  computed: {
    class_id() {
      return this.$route.query.id;
    }
  },
  methods: {
    upload_img() {
      let _this = this;
      let input = document.createElement("input");
      input.type = "file";
      input.click();
      input.addEventListener("change", function() {
        let allow_type = ["png", "gif", "jpg", "bmp", "jpeg"];
        let e = this;
        let file = e.files[0];
        let fileType = /\.[^\.]+$/.exec(file.name);
        fileType = fileType[0].replace(".", "");
        if (allow_type.indexOf(fileType) == -1) {
          alert("文件类型错误，请选择图片文件");
          return;
        }

        window.URL = window.URL || window.webkitURL;
        if (window.URL) {
          let img_data = {
            id: 0,
            base64: "",
            progress: 0
          };
          // var pic = $(
          //   '<div class="img_item"><div class="progress_bg"></div><div class="progress_text">0%</div><div class="progress_del">x</div></div>'
          // );
          var r = new FileReader();
          r.readAsDataURL(file);
          r.onload = function() {
            var img = new Image();
            img.src = this.result;
            img.onload = function() {
              if (img.width > img.height) {
                img_data.backgroundSize = "auto 100%";
                _this.img_list.push(img_data);
                // pic.css("background-size", "auto 100%");
              }
            };
            img_data.base64 = this.result;
            // pic.css("background-image", "url(" + this.result + ")");
          };

          let config = {
            headers: { "Content-Type": "multipart/form-data" },
            onUploadProgress: progressEvent => {
              img_data.progress =
                (progressEvent.loaded / progressEvent.total) * 100;
            }
          };
          var fd = new FormData();
          fd.append("file", file);
          _this.$axios
            .post("/api/index/file/uploadImg", fd, config)
            .then(response => {
              // alert("图片上传成功");
            });
          // $(".add_img").before(pic);
        } else {
          alert("您的环境当前不支持在线预览上传");
        }
      });
    },
    upload_file() {
      let _this = this;
      let input = document.createElement("input");
      input.type = "file";
      input.click();
      input.addEventListener("change", function() {
        var allow_type = ["rar", "zip"];
        let e = this;
        let file = e.files[0];
        let fileType = /\.[^\.]+$/.exec(file.name);
        fileType = fileType[0].replace(".", "");
        if (allow_type.indexOf(fileType) == -1) {
          alert("文件类型错误，请选择rar,zip文件");
          return;
        }
        let file_data = {
          id: 0,
          name: file.name,
          size: _this.renderSize(file.size),
          progress: 0
        };

        _this.file_list.push(file_data);
        let config = {
          headers: { "Content-Type": "multipart/form-data" },
          onUploadProgress: progressEvent => {
            file_data.progress =
              (progressEvent.loaded / progressEvent.total) * 100;
          }
        };
        var fd = new FormData();
        fd.append("file", file);
        _this.$axios
          .post("/api/index/file/uploadFile", fd, config)
          .then(response => {
            // alert("图片上传成功");
          });
      });
    },
    renderSize(value) {
      if (null == value || value == "") {
        return "0 Bytes";
      }
      var unitArr = new Array(
        "Bytes",
        "KB",
        "MB",
        "GB",
        "TB",
        "PB",
        "EB",
        "ZB",
        "YB"
      );
      var index = 0;
      var srcsize = parseFloat(value);
      index = Math.floor(Math.log(srcsize) / Math.log(1024));
      var size = srcsize / Math.pow(1024, index);
      size = size.toFixed(2); //保留的小数位数
      return size + unitArr[index];
    },
    removeImg(index) {
      this.img_list.splice(index, 1);
    },
    removeFile(index) {
      this.file_list.splice(index, 1);
    }
  },
  created() {}
};
</script>

<style scoped lang="less">
.content {
  padding: 0.75rem;
  background: #eee;
}
.img_item {
  margin: 0.25rem;
  display: flex;
  justify-content: center;
  flex-direction: column;
  text-align: center;
  position: relative;
  width: 3rem;
  height: 3rem;
  background-color: #fff;
  background-position: center center;
  background-size: 100% auto;
}

.img_item .progress_bg {
  position: absolute;
  width: 100%;
  bottom: 0;
  height: 100%;
  background: rgba(0, 0, 0, 0.2);
}
.img_item .progress_text {
  margin: auto;
  background: rgba(0, 0, 0, 0.8);
  color: #fff;
  width: 2rem;
  border-radius: 0.1rem;
}
.img_item .progress_del {
  position: absolute;
  right: -0.4rem;
  top: -0.4rem;
  width: 0.8rem;
  height: 0.8rem;
  line-height: 0.6rem;
  text-align: center;
  color: #fff;
  border-radius: 50%;
  background: #f22;
}
.btn {
  font-size: 0.8rem;
  border-radius: 0.25rem;
}
.file_box {
  background: #ffffff;
  margin: 0.25rem 0;
  border-radius: 0.25rem;
  overflow: hidden;
}
.form_box {
  height: 12rem;
  flex-direction: column;
  .input {
    margin: 0.25rem 0;
    border-radius: 0.25rem;
    font-size: 0.8rem;
  }
  .textarea_out {
    flex-direction: column;
    background: #ffffff;
    border-radius: 0.25rem;
    padding: 0.5rem 0.25rem;
    textarea {
    }
  }
}
.add_box {
}
.add_btn {
  margin: 0.25rem;
  display: flex;
  justify-content: center;
  flex-direction: column;
  text-align: center;
  height: 3rem;
  width: 3rem;
  line-height: 1rem;
  background: #eee;
  color: #999;
  border-radius: 0.1rem;
}
.file_group {
  flex-wrap: wrap;
}
.file_item {
  margin: 0.25rem;
  display: flex;
  width: 100%;
}
.file_icon {
  width: 2rem;
  height: 2rem;
  background-image: url(/static/svg/rar.svg);
}
.file_progress_box {
  flex: 1;
  padding: 0.25rem;
  text-align: center;
}
.file_progress {
  height: 0.6rem;
  border: #04ab4f 0.05rem solid;
  border-radius: 0.1rem;
}
.file_progress_bar {
  height: 100%;
  width: 0%;
  background-color: #07d664;
}
.file_action {
  display: flex;
  justify-content: center;
  flex-direction: column;
  text-align: center;
}
.file_item .btn_remove {
  width: 2rem;
}
.btn_setting {
  display: none;
  width: 2rem;
}
</style>
